<template>
  <div>
    <el-row id="panel">
    </el-row>
    <el-row id="product_info">
      <div>
        <span style="display:block;font-size: 40px;font-weight: bold;">产品服务</span>
        <span style="display:block;font-size: 18px;font-weight: bold;color:#909399;">PRODUCT SERVICE</span>
      </div>
      <el-divider></el-divider>
      <el-row :gutter="60" style="margin-top: 40px;">
        <el-col v-for="(item, index) in productList" :key="index" :xs="24" :sm="24" :md="12" :lg="8" :xl="8" style="margin-bottom: 60px;">
          <el-card>
            <div style="height:320px;display: flex;align-items: center;">
              <el-image :src="item.img" fit="fill" />
            </div>
            <div style="height:215px;">
              <span style="display:block;font-weight: bold;">{{ item.name }}</span>
              <el-divider class="product_divider"></el-divider>
              <span style="display:block;line-height: 2;text-indent: 2em;height:168px;overflow-y: auto;">
                {{ item.description }}
              </span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
      pageHeight: 0,
      productList: [
        {
          img: require('../assets/img/pc.png'),
          name: '个人电脑',
          description: '为客户提供全套完整的设计及生产制造解决方案，满足客户高度定制化及成本、质量、交付需求。'
        },
        {
          img: require('../assets/img/X86.png'),
          name: 'X86服务器',
          description: '广泛应用于企业级应用、云计算、虚拟化、大数据处理等领域。它们可以承载网站、数据库、邮件服务器等各种业务和应用，满足各种规模企业的需求。'
        },
        {
          img: require('../assets/img/xc.png'),
          name: '信创产品',
          description: '基于国产芯片和操作系统的技术创新产品，以实现自主可控和信息安全，广泛应用于政府、金融、电信、教育、医疗等关键领域，提供稳定、高效、安全的基础设施支持。'
        },
        {
          img: require('../assets/img/加固机.png'),
          name: '加固电脑&平板',
          description: '采用宽温的主板、散热铝板、加热膜及温控开关等技术手段来保证其在高温、低温、潮湿、多尘、震动等恶劣环境条件下的稳定性。广泛应用于军事、航空航天、工业自动化、交通运输等领域。'
        },
        {
          img: require('../assets/img/工作站.png'),
          name: '工作站',
          description: '高性能通用微型计算机，广泛应用于科学和工程计算、软件开发、计算机辅助分析、计算机辅助制造、工程设计和应用、图形和图像处理、过程控制和信息管理等。'
        },
        {
          img: require('../assets/img/投影仪.png'),
          name: '智能影像设备',
          description: '适用于泛家庭娱乐使用的微型投影仪，让您轻松拥有超大屏体验，享受在线追剧、听歌、游戏、办公等多种用途。'
        },
        {
          img: require('../assets/img/直播终端.png'),
          name: '虚拟直播终端',
          description: '结合虚拟现实（VR）技术或增强现实（AR）技术，为用户提供高度沉浸式的直播观看体验。广泛应用于电商直播、娱乐直播、在线教育、虚拟发布会等。通过虚拟直播终端，企业可以更加灵活地搭建直播场景，快速展示产品特点，提升用户体验和参与度。'
        },
        {
          img: require('../assets/img/移动电源.png'),
          name: '移动电源',
          description: '个人可随身携带的便携充电器，使用锂离子电池（Li-ion）或锂离子聚合物电池（Li-PO），在需要时为手持式移动设备等消费电子产品（如手机、平板电脑、笔记本电脑等）充电。'
        },
        {
          img: require('../assets/img/心电仪.png'),
          name: '电子医疗仪器',
          description: '可随身携带的、可对个人心脏进行随时随地监护，为心脏疾病的早期检测和亚健康人群进行预防提供了有效的检测手段，为医生提供病人相关的有效信息。'
        },
        {
          img: require('../assets/img/智能音箱.png'),
          name: '智能音箱设备',
          description: '集成虚拟助手和语音命令的无线音箱，能够轻松地识别人们的语音指令，从而实现各种操作，如播放音乐、播报天气、设定闹钟、查询信息、控制智能家居设备等。'
        }
      ]
    }
  },
  mounted () {
    this.getPageHeight()
    // 监控浏览器大小变化，调整页面的布局
    window.onresize = () => {
      this.getPageHeight()
    }
  },
  methods: {
    getPageHeight () {
      this.pageHeight = window.innerHeight
    }
  }
}
</script>
<style scoped lang="less">
#panel {
  height: 400px;
  width: 100%;
  background: url('../assets/img/product.jpg') no-repeat;
  background-size: cover;
  background-position: center center;
  display: flex;
  align-items: center;
  padding-left: 15%;
}
#product_info {
  padding: 40px 10%;
  color: #303133;
  .product_divider {
    margin: 5px 0px 20px 0px;
  }
}
</style>
